<!--宽度100%并且轮播内容可能是视频可能是图片-->
<template>
    <div class="img-and-video">
        <div class="small" :class="{'big-swiper':bigger}" @click="biggerFn">
            <swiper class="swiper-wrap" :options="swiperOption" ref="mySwiper" v-if="swiperContent.list && swiperContent.list.length > 0 && swiperList.length > 0">
                <swiper-slide class="swiper-item-wrap" ref="swiperItem" v-for="(swiperItem,index) in swiperContent.list" :key="index" >
                    <div class="swiper-item" v-if="swiperItem.mediaType == 1">
                        <img class="width-full booking-item-top-img" :src="swiperItem.url"/>
                    </div>
                    <div class="video-wrap positionR displayFlex flexCenter" v-else-if="swiperItem.mediaType == 0">
                        <img v-if="swiperList[index].playIcon" class="pause-icon positionABC" @click="playVideo(index)" src="../../../assets/images/common/pause_icon.png" alt="">
                        <video class="video-style"
                               :id="index"
                               v-if="swiperList[index].showVideo"
                               :x5-playsinline="swiperContent.isPlaySinline"
                               :playsinline="swiperContent.isPlaySinline"
                               webkit-playsinline="true"
                               x-webkit-airplay="true"
                               x5-video-player-fullscreen='true'
                               x5-video-ignore-metadata='true'
                               preload
                               :poster="swiperItem.poster"
                               :autoplay="swiperItem.autoplay"
                               x5-video-orientation="portraint"
                               video-orentation="portraint"
                               :src="swiperItem.url"
                               @click="videoControls(index)"
                               @ended="closeVideo(index)"
                        ></video>
                    </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImgVideoSwiper",
        props:{
            swiperContentProp:{
                type:Object
            },
            swiperMsgProp:{
                type:Object
            }
        },
        data(){
            return{
                bigger:false,
                swiperContent:{
                    isPlaySinline:true,//是否不全屏
                    imgIsCanBigger:false,//图片是否可以放大
                    autoplay:true,//自动播放，视屏的时候有
                    list:[{
                        mediaType:0,//0表示视频，1表示图片
                        url:'',//图片地址或者视频地址
                        poster:'',//海报图，视屏的时候有
                    }]
                },
                swiperList:[
                    /*
                    * @playIcon:true,//播放按钮的显示和隐藏
                    * @showVideo:true,//视频是否渲染
                    * */
                ],
                swiperOption:{
                    autoplay:3000,
                    autoplayDisableOnInteraction: true,
                    onInit: function(swiper){
                        setTimeout(()=>{
                            this.sliedEnd(swiper.activeIndex,swiper.activeIndex,true);
                        },600)
                    }.bind(this),
                    onSlidePrevEnd:function(swiper){
                        this.sliedEnd(swiper.activeIndex + 1,swiper.activeIndex)
                    }.bind(this),
                    onSlideNextEnd:function(swiper){
                        this.sliedEnd(swiper.activeIndex - 1,swiper.activeIndex)
                    }.bind(this)
                }
            }
        },
        mounted(){
            let that = this;
            let tempObj = {
                playIcon:true,//播放按钮的显示和隐藏
                showVideo:true,//视频是否渲染
            }
            this.swiperContent = Object.assign({},this.swiperContent,this.swiperContentProp);
            for( let value in that.swiperContent ){
                that.swiperList.push(tempObj);
            }
        },
        methods:{
            /*swiper*/
            biggerFn(){
                if(this.swiperContent.imgIsCanBigger){
                    this.bigger = !this.bigger;
                }
            },
            playVideo(index){
                if(this.swiperContent.list[index].mediaType == 0 && this.swiperContent.list[index].url){
                    $('.swiper-item-wrap').eq(index).find('video')[0].play();
                    this.swiperList[index].playIcon = false;
                    this.swiperList.splice(index,1,this.swiperList[index]);
                }
            },
            pauseVideo(index){
                if(this.swiperContent.list[index].mediaType == 0 && this.swiperContent.list[index].url){
                    $('.swiper-item-wrap').eq(index).find('video')[0].pause();
                    this.swiperList[index].playIcon = true;
                    this.swiperList.splice(index,1,this.swiperList[index]);
                }
            },
            videoControls(index){
                if(this.swiperContent.list[index].mediaType == 0 && this.swiperContent.list[index].url){
                    if(this.swiperList[index].playIcon){
                       this.playVideo(index)
                    }else{
                        this.pauseVideo(index)
                    }
                }
            },
            closeVideo(index){
                if( index < this.swiperContent.list.length && this.swiperContent.list[index].mediaType == 0 && this.swiperContent.list[index].url){
                    this.swiperList[index].showVideo = false;
                    this.swiperList[index].playIcon = false;
                    this.swiperList.splice(index,1,this.swiperList[index]);
                    setTimeout(()=>{
                        this.swiperList[index].showVideo = true;
                        this.swiperList[index].playIcon = true;
                        this.swiperList.splice(index,1,this.swiperList[index]);
                    },100)
                }
            },
            sliedEnd(oldIndex,nowIndex,isInit){
                if(isInit){
                    if(this.isIphone){
                        this.playVideo(oldIndex);
                    }
                }else{
                    this.closeVideo(oldIndex);
                    if(this.isIphone){
                        this.playVideo(nowIndex);
                    }
                }
            }
        },
        watch:{
            swiperContentProp(val){
                this.swiperContent = Object.assign({},this.swiperContent,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    @import url($css_root + 'css/swiper.min.css');
    .video-style{
        height: 100%;
        max-width: 100%;
    }
    .big-swiper{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        background-color: #000;
        z-index: 1060;
        .swiper-container{
            position: relative;
            display: block;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .swiper-slide{
            height: 100%;
            img{
                height: 6.67rem;
                height: 100vh;
                object-fit: contain;
            }
        }
    }
    .swiper-item{
        height: 2rem;
        width: 100%;
    }
    .booking-item-top-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pause-icon{
        height: 1rem;
        width: 1rem;
        z-index: 1;
    }
    .swiper-wrap{
        height: 2rem;
        overflow: hidden;
    }
    .video-wrap{
        background: url(../../../assets/images/common/nw_bg.png) no-repeat center center/cover;
        height: 2rem;
    }
</style>